<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background: hsl(210, 13%, 60%);
            color: hsl(210, 13%, 30%);
            text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);
            width: 450px;
            height: 50px;
        }

        p {
            margin: 20px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            background: deeppink;
            color: white;
            text-shadow: 1px 1px black, -1px -1px black,
                1px -1px black, -1px 1px black
        }

        .glow {
            width: 100px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            background-color: #333;
            color: #ffc;
            transition: 1s;
            text-shadow: 0 0 .1em, 0 0 .3em;
        }

        .glow:hover {
            color: transparent;
            text-shadow: 0 0 .1em white, 0 0 .3em white;
            /* filter: blur(.1em); */
        }

        .d {
            margin-top: 20px;
            width: 200px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            color: white;
            background: hsl(0,50%,45%);
            text-shadow: 1px 1px black, 2px 2px black,
            3px 3px black, 4px 4px black,
            5px 5px black, 6px 6px black,
            7px 7px black, 8px 8px black
        }
    </style>
</head>

<body>
    <div>
        background: hsl(210, 13%, 60%);
        color: hsl(210, 13%, 30%);
        text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8)
    </div>
    <p>CSS</p>
    <div class="glow">glow</div>
    <div class="d">CSS3D</div>
</body>

</html>